---
import Layout from '@layouts/Layout.astro';
import { getCollection } from 'astro:content';
import type { CollectionEntry } from 'astro:content';

const baseUrl = import.meta.env.BASE_URL;

// 定义常量
const INITIAL_POSTS_COUNT = 10;

// 获取所有文章
const allPosts = await getCollection('blog');
const posts = allPosts.sort((a: CollectionEntry<'blog'>, b: CollectionEntry<'blog'>) => 
  b.data.date.valueOf() - a.data.date.valueOf()
);

// 获取所有分类
const categories = [...new Set(posts.map(post => post.data.category).filter(Boolean))];

// 生成文章链接
const postLinks = posts.map((post: CollectionEntry<'blog'>) => ({
  ...post,
  url: `${baseUrl}/posts/${post.slug}`
}));
---

<Layout title="博客文章">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"
    x-data={`{
      posts: [],
      allPosts: ${JSON.stringify(postLinks)},
      currentCount: ${INITIAL_POSTS_COUNT},
      loading: false,

      init() {
        this.posts = this.allPosts.slice(0, this.currentCount);
      },

      async loadMore() {
        if (this.loading || this.currentCount >= this.allPosts.length) return;
        this.loading = true;
        await new Promise(resolve => setTimeout(resolve, 800));
        const nextPosts = this.allPosts.slice(this.currentCount, this.currentCount + 10);
        this.posts = [...this.posts, ...nextPosts];
        this.currentCount += 10;
        this.loading = false;
      }
    }`}
  >
    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">博客文章</h1>
    
    <!-- 筛选器 -->
    <div class="flex flex-wrap gap-4 mb-12">
      {categories.map((category: string) => (
        <button class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-700 hover:border-indigo-600 dark:hover:border-sky-400 hover:text-indigo-600 dark:hover:text-sky-400 transition-colors dark:text-gray-300">
          {category}
        </button>
      ))}
    </div>

    <!-- 文章列表 -->
    <div class="space-y-16">
      <template x-for="post in posts" :key="post.id">
        <article class="flex items-start group">
          <time class="flex-shrink-0 w-24 text-gray-500 dark:text-gray-400" :datetime="post.data.date" 
                x-text="new Date(post.data.date).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })">
          </time>
          <div class="flex-grow">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-sky-400 transition-colors">
              <a :href="post.url" x-text="post.data.title"></a>
            </h3>
            <template x-if="post.data.description">
              <p x-text="post.data.description" 
                 class="mt-2 text-gray-500 dark:text-gray-400 line-clamp-3 overflow-hidden">
              </p>
            </template>
            <template x-if="post.data.author">
              <p class="mt-2 text-sm text-gray-500 dark:text-gray-400" x-text="`作者：${post.data.author}`"></p>
            </template>
          </div>
        </article>
      </template>
    </div>

    <!-- 加载更多区域 -->
    <div 
      x-show="currentCount < allPosts.length"
      x-intersect.once="loadMore"
      class="mt-16 h-20 flex items-center justify-center"
    >
      <div x-show="loading" class="flex items-center space-x-3">
        <div class="w-3 h-3 bg-indigo-600 rounded-full animate-bounce"></div>
        <div class="w-3 h-3 bg-indigo-600 rounded-full animate-bounce [animation-delay:0.2s]"></div>
        <div class="w-3 h-3 bg-indigo-600 rounded-full animate-bounce [animation-delay:0.4s]"></div>
      </div>
      <div x-show="!loading" class="text-gray-500 dark:text-gray-400">
        向下滚动加载更多
      </div>
    </div>

    <!-- 全部加载完毕提示 -->
    <div 
      x-show="currentCount >= allPosts.length" 
      x-cloak
      class="text-center mt-16"
    >
      <p class="text-gray-500 dark:text-gray-400 mb-6">已经到底啦 ~</p>
    </div>
  </div>
</Layout>

<style>
  [x-cloak] { display: none !important; }
</style> 